<template>
    <div>
        <div v-if="photoInfo" class="container">
            <h3>{{ photoInfo.title }}</h3>
            <div class="info">
                <span>点击：{{ photoInfo.click }}</span>
                <span>{{ photoInfo.add_time | dateFormat }}</span>
            </div>
            <hr/>
            <div class="thums">
                <div class="thum" v-for="(item, i) in photoInfo.thums" :key="item.id" @click="imagePreview(i)">
                    <img v-lazy="item.url" :alt="item.description" width="100%">
                </div>
            </div>
            <p v-html="photoInfo.content"></p>
        </div>
        <Comment/>
    </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload, ImagePreview } from 'vant';
import Comment from '../../components/Comment';
import { getPhotoInfo } from '../../services';

Vue.use(Lazyload);

export default {
    components: { Comment },
    data() {
        return {
            photoInfo: null
        };
    },
    computed: {
        id() {
            return this.$route.params.id;
        }
    },
    methods: {
        imagePreview(index) {
            ImagePreview({
                images: this.photoInfo.thums.map(item => item.url),
                startPosition: index,
                closeable: true,
            });
        }
    },
    created() {
        getPhotoInfo(this.id)
            .then(photoInfo => {
                this.photoInfo = photoInfo;
            })
            .catch(err => console.error('图片信息获取失败 id: ' + this.id, err.message));
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    h3 {
        width: 100%;
        text-align: center;
    }
    .info {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #999;
    }
    .thums {
        columns: 2; 
        column-gap: 5px;
        .thum {
            background-image: url('../../images/loading.gif');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 20px;
        }
    }
}
</style>